import { memo } from "react";
import useUserInfo from "../../hooks/useUserInfo";
import Loading from "../../baseUI/loading";
import {
  PageContainer,
  ProForm,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-components";
import OwnStyle from "./style";
import { Col, Image, message, Row } from "antd";
import { useMutation } from "@apollo/client";
import { updateUser_service } from "../../graphql/user";
import UploadV1 from "../../baseUI/uploadV1";

const Own = memo(() => {
  const [fetch_updateUser_service] = useMutation(updateUser_service);

  const { loading, data, refetch } = useUserInfo();
  const finishClick = async (value: { company: string; address: string }) => {
    if (!loading) {
      const name = value.company;
      const desc = value.address;
      const id = data?.id;
      const params: { name?: string; desc?: string } = {};
      if (!name && !desc) {
        void message.error("请填写信息再提交");
        return;
      }
      if (name) params.name = name;
      if (desc) params.desc = desc;
      await fetch_updateUser_service({
        variables: {
          id,
          params,
        },
      });
      refetch();
      void message.success("修改用户数据成功");
    } else {
      void message.error("未获取到用户信息，请刷新重试");
    }
  };
  return (
    <OwnStyle>
      <PageContainer>
        {loading ? (
          <Loading />
        ) : (
          <Row>
            <Col span={12}>
              <ProForm
                layout="horizontal"
                grid={false}
                submitter={{
                  resetButtonProps: {
                    style: {
                      display: "none",
                    },
                  },
                }}
                onFinish={(formData: Record<string, any>) =>
                  finishClick(formData as { company: string; address: string })
                }
              >
                <div className="title">用户信息</div>
                <ProFormText
                  width="md"
                  name="name"
                  label="手机号"
                  placeholder={data ? data.tel : "123456879"}
                  tooltip="不可更改"
                  disabled
                />
                <ProFormText
                  width="md"
                  name="company"
                  label="昵称"
                  placeholder={data?.name ?? "请输入昵称"}
                />
                <ProFormTextArea
                  colProps={{ span: 24 }}
                  name="address"
                  label="简介"
                  placeholder={data?.desc ?? "请输入简介"}
                />
              </ProForm>
            </Col>
            <Col span={12} className="user_avatar_upload">
              <div className="avater-wrapper">
                <div className="avatar">
                  <Image
                    src={
                      (data?.avatar.length as number) > 0
                        ? (data?.avatar as string)
                        : "https://danyun.oss-cn-chengdu.aliyuncs.com/brand.png"
                    }
                    alt="头像加载错误"
                    fit="cover"
                  />
                </div>
              </div>
              <UploadV1
                title="拖拽图片到此处或者点击上传修改头像"
                id={data?.id}
                refetch={() => refetch()}
              />
            </Col>
          </Row>
        )}
      </PageContainer>
    </OwnStyle>
  );
});

export default Own;
